<template>
	<view class="pageWrap">
		<!-- <cus-nav title="图书检索" :backShow="false"></cus-nav> -->
		<!-- <view class="searchWrap">
			<search-box @search="search"></search-box>
		</view> -->
		<!-- <van-tabs v-model="" @change="tabChange">
		  <van-tab title="新书推荐" name="0" />
		  <van-tab title="热门推荐" name="1" />
		  <van-tab title="必读书目" name="2" />
		  <van-tab title="主席书单" name="3" />
		  <van-tab title="课外必读" name="4" />
		</van-tabs> -->
		<van-row>
			<van-col span="5">
				<view>
					<van-sidebar v-model="curTabIndex" @change="tabChange">
					  <van-sidebar-item title="新书推荐" />
					  <van-sidebar-item title="热门推荐" />
					  <van-sidebar-item title="必读书目" />
					  <van-sidebar-item title="主席书单" />
					  <van-sidebar-item title="课外必读" />
					</van-sidebar>
				</view>
			</van-col>
			<van-col span="19">
				<view class="searchBox">
					<view class="searchList clear">
						<view class="searchItem left clear" style="width:100%;" @click="toBookDetail(item.id)" v-for="(item, index) in this.searchList" :key="index">
							<view class="searchSurface left">
								<image :src="item.imagefileid|bookFaceImg" @error="replaceImg($event, 'searchList', index)"></image>
							</view>
							<view class="surchContent left">
								<view >
									<view class="fpt32 bold ellipsis">{{item.bookname}}</view>
									<view class="fpt24 ellipsis" style="margin-top: 10rpx;">{{item.firstauthor||''}}</view>
								</view>
								<view class="fpt22 abstract">{{item.abstract||'暂无简介'}}</view>
							</view>
						</view>
					</view>
					<!-- <uni-load-more :status="bookLoadState"></uni-load-more> -->
				</view>
			</van-col>
		</van-row>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {queryAbstract} from '../../common/api/book.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import cusNav from '@/components/cus-nav'
	import searchBox from '@/components/search-box.vue'
	import _config from '../../common/js/config.js'
	import {bookList} from '../../common/js/booklist2.js'
	export default {
		
		data() {
			return {
				// debug: _config.DEBUG,
				debug: false,
				curTabIndex: '0',
				books: [1],
				keyword: '',
				searchList: [],
				searchCount: 0,
				pageindex: 1,
				pagesize: 30,
				more: false,
				bookLoadState: 'noMore',
				options :'',
				
				reviewType: 1
			}
		},
		computed:{
			...mapState(['user']),
			actShadowLeft(){
				return this.curTagIndex * 122 + 42 + 'rpx'
			},
			photo(){
				let src = this.$store.state.user.userimg || '/static/img/logo.png'
				return src
			}
		},
		components: { 
			uniLoadMore,
			cusNav,
			searchBox
		},
		onLoad(option){
			let token = uni.getStorageSync('token')
			if(option.token){
				token = option.token
			}
			if(option.departmentid){
				uni.setStorageSync('depid', option.departmentid)
			}
			if(option.organizationid){
				uni.setStorageSync('orgid', option.organizationid)
			}
			if(option.keyid){
				uni.setStorageSync('keyid', option.keyid)
			}
			if(this.debug){
				token = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IkY2QzIzQzVFRTc1M0ZGRjNFMjg4NTE4ODY4NzgwRDQwN0ZBNUIzQ0RSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjlzSThYdWRUX19QaWlGR0lhSGdOUUgtbHM4MCJ9.eyJuYmYiOjE2ODkwNTQzNTEsImV4cCI6MTY4OTA1Nzk1MSwiaXNzIjoiaHR0cDovLzE5Mi4xNjguMC4zOjkwMTAiLCJjbGllbnRfaWQiOiJSZWFkZXJDbGllbnQiLCJzdWIiOiJ7XCJPcmdhbml6YXRpb25JZFwiOjEsXCJSb2xlXCI6XCJSZWFkZXJcIixcIklkXCI6MTYzNzh9IiwiYXV0aF90aW1lIjoxNjg5MDU0MzUxLCJpZHAiOiJsb2NhbCIsInJvbGUiOiJSZWFkZXIiLCJuYW1lIjoi5aea5pet5YWJIiwiZ2VuZGVyIjoi55S3Iiwib3JnYW5pemF0aW9uaWQiOiIxIiwicmVhZGVyY29kZSI6IjM1MDIwMDA2OTQiLCJpZGVudGl0eWNhcmQiOiIyMzAyMjExOTkxMDQxOTA0MzIiLCJqdGkiOiJFN0E3QUQ2ODMwM0RFNzI5M0NBNUMwQjMyNjNEOEM3MiIsImlhdCI6MTY4OTA1NDM1MSwic2NvcGUiOlsib3BlbmlkIiwicHJvZmlsZSIsInJlYWRlci5zY29wZSIsIm9mZmxpbmVfYWNjZXNzIl0sImFtciI6WyJwd2QiXX0.Rf_f8x7BjbSPH1yBngk6d1YUeLTDerFrplQRDpi6wJ3-OEl_2xwrHslqpqEbrbijxzHLbeXiGUkQ__pDMPXY599-4nHFH10w4KR9Ko8Th8DbsA4AzSsOQr-OysYVIQuXEp1_7y2PAHQb8jOeRQArj44IrV8_LVxSZrLPfqIfVME3GS23W9D0n7jjua24-pt5_8FjV4pQDvrSSzDVPXa1ATiCHk2AA5krUmbXL3j7u-btn43WL6K0NFxKnDPm3bnlATHSk4yq_9h7JGJCGgX5m2ngcrF1Gm7v0JJkbhp4VSFY7vrAeQcYMX1N32iZJaWj9EFFnRKJzJFETfZz4WYfeQ'
				// token = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IkY2QzIzQzVFRTc1M0ZGRjNFMjg4NTE4ODY4NzgwRDQwN0ZBNUIzQ0RSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjlzSThYdWRUX19QaWlGR0lhSGdOUUgtbHM4MCJ9.eyJuYmYiOjE2NzMzOTkzODksImV4cCI6MTY3MzQwMjk4OSwiaXNzIjoiaHR0cDovLzE5Mi4xNjguMC4zOjkwMTAiLCJjbGllbnRfaWQiOiJSZWFkZXJDbGllbnQiLCJzdWIiOiJ7XCJPcmdhbml6YXRpb25JZFwiOjEsXCJSb2xlXCI6XCJSZWFkZXJcIixcIklkXCI6MTEzNDJ9IiwiYXV0aF90aW1lIjoxNjczMzk5Mzg5LCJpZHAiOiJsb2NhbCIsInJvbGUiOiJSZWFkZXIiLCJuYW1lIjoi6aKc5ZCM5a2mIiwiZ2VuZGVyIjoi55S3Iiwib3JnYW5pemF0aW9uaWQiOiIxIiwicmVhZGVyY29kZSI6Inl0eCIsImp0aSI6IkNCRTIyREM3NDdGNzgwMEMwQjJBRDcxMDY3QkNEN0EzIiwiaWF0IjoxNjczMzk5Mzg5LCJzY29wZSI6WyJvcGVuaWQiLCJwcm9maWxlIiwicmVhZGVyLnNjb3BlIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.aA8xPFwX9buvdkfr352_PV9K0kpzHQJ-i20XTplGbfUelYx4AMltBu3Nnro1KIzEbY3RJaCsvtohDfRA0c_EaNZDQPeDUy020Mr00Citxn6_0p6i098t4f8aqEx00BTe89s9_fa1UQfa6Y_BAWYkxg5E-p6WlljXv8o8hsEHE84RKiXt0jeKjkSz1zSBxCJWxqq9OMQmMFTqyro6nhrjElRiYJZFE-vXwv82NDw7tDbxefqRW8V09EEN4OBRhTTtw4xinhuVGoClzUdt84XarL32MxruG4OP6ay8m_BqjX85MmIUcIo20QGvxrog4uJN6m3Ic1oTjqqVxMuPs7rn5w'
				uni.setStorageSync('orgid', 29)
				uni.setStorageSync('depid', 1)
				uni.setStorageSync('keyid', 16378)
			}
			if(token){
				this.$store.commit('setToken', token)
				uni.setStorageSync('token', token)
			}
			console.log(this.$store)
			
		},
		created(){
			this.search()
		},
		onShow(){
			this.setTitle('图书列表')
		},
		onReachBottom(){
			this.queryAbstract()
		},
		onPullDownRefresh(){
			
		},
		methods: {
			replaceImg(event, key, index){
				console.log('图片加载出错了')
				console.log(event.detail.errMsg)
				this.$set(this[key][index], 'image', '/static/img/book/bookface.png')
				this.$set(this[key][index], 'bookimg', '/static/img/book/bookface.png')
			},
			tabChange(name, title){
				this.search()
			},
			initSearchData(){
				this.searchList = []
				this.keyword = ''
				this.searchCount = 0
				this.pageindex = 1
				this.more = true
			},
			async search(keyword){
				// if(!keyword){
				// 	return
				// }
				
				this.initSearchData()
				this.keyword = keyword
				this.queryAbstract()
			},
			async queryAbstract(){
				if(!this.more){
					return
				}
				this.bookLoadState = 'loading'
				const params = {
					keyword: this.keyword,
					index: this.pageindex,
					pagesize: this.pagesize
				}
				// const res = await queryAbstract(params)
				// res.data.forEach(e=>{
				// 	e.image =  _config.url + '/FileApi/File/Download?fileid=' + e.imagefileid
				// })
				// const books = bookList.slice(this.curTabIndex, (this.curTabIndex*1) + 1)
				const books = bookList[this.curTabIndex]
				const res = {
					data: books,
					totalcount: books.length
				}
				
				this.searchCount = res.totalcount
				if(res.data.length === this.pagesize){
					this.pageindex++
					this.bookLoadState = 'more'
				}else{
					this.more = false
					this.bookLoadState = 'noMore'
				}
				// if(res.data instanceof Array){
				// 	res.data = res.data.filter(e=>{
				// 		return !(/阅读专项训练/.test(e.bookname))
				// 	})
				// }
				this.searchList = this.searchList.concat(res.data)
				
			},
			toBookDetail(id){
				uni.navigateTo({
					url: `/pages/book/bookDetail?bookid=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../../common/style/public.css';
.searchWrap{
	padding: 32rpx;
}
.navSlot{
	position: relative;
	text-align: center;
	image{
		position: absolute;
		left: 45rpx;
		top:10rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
	}
}
.twinellipsis{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pageWrap{
	// background: #eceef3;
}


.searchBox{
	background: #ffffff;
	min-height: 100%;
	margin: 0 20rpx;
	padding-bottom: 20rpx;
}
.searchList{
	padding: 10rpx;
	background: #ffffff;
	.searchItem{
		margin-bottom: 20px;
		height: 270rpx;
		overflow: hidden;
		background-color: #ab9e93;
		color: #3c2d38;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.searchSurface{
		width: 20%;
		text-align: center;
		image{
			width: 166rpx;
			height: 225rpx;
		}
	}
	.surchContent{
		padding-bottom: 15rpx;
		width: 76%;
		height: 100%;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-around;
		.abstract{
			line-height: 1.4em;
			height: 5.4em;
			padding-right: 10rpx;
			margin: 25rpx 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			overflow: hidden;
		}
	}
}
.temparory{
	width: 750rpx;
	height: 300rpx;
	margin-bottom: 15rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
<style>
.van-tabs__nav .van-tab .van-ellipsis{
	color: red;
	font-size: 25px!important;
}
</style>